<template>
  <!--管理模块-->
  <r-drawer class="manage" width="200px" title="管理模块" v-bind="$attrs">
    <div class="manage__item" :key="item.id" v-for="item in modList">
      <span>{{ item.name }}</span>
      <i
        class="manage__item--switch resume"
        :class="`resume-switch_${item.status ? 'on' : 'off'}`"
        @click="item.status = !item.status"
      />
    </div>
    <div class="manage__add" @click="addMod">
      <i class="resume resume-plus" />
      <span>自定义模块</span>
    </div>
  </r-drawer>
</template>

<script>
import RDrawer from "../base/RDrawer";
import { registerMod } from "@/components/r-container/components/useData";
import { inject, computed } from "vue";
export default {
  name: "setting",
  components: { RDrawer },
  setup() {
    const containerList = inject("containerList") || [];
    const modList = computed(() => {
      return Object.values(containerList).reduce(
        (res, c) => res.concat(c.compList),
        []
      );
    });
    const addMod = () => {
      const modId = Date.now();
      const modData = {
        id: modId,
        type: "Customize",
        title: "自定义模块...",
        settingList: {
          switchLs: [
            {
              type: "title",
              name: "隐藏标题栏目",
              status: true,
            },
          ],
        },
        dataList: {
          content: "添加自定义描述...",
        },
      };
      const { id, type, title } = modData;
      containerList[1].compList.push({ id, type, name: title });
      registerMod(modId, modData);
    };
    return {
      modList,
      addMod,
    };
  },
};
</script>

<style scoped lang="less">
.manage {
  &__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid lightgrey;
    padding: 12px 7px;

    i {
      font-size: 18px;
      cursor: pointer;
    }
  }

  &__add {
    margin-top: 30px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid lightskyblue;
    border-radius: 2px;
    color: lightskyblue;
    cursor: pointer;

    i {
      font-size: 15px;
    }
  }
}
</style>
